import React, { Component } from "react";

class Child extends Component {
  render() {
    console.log(this.props.children);
    // 在react里面，可以直接使用props.children来接收插槽的内容
    // 如果做具名插槽，推荐传入对象的方式
    return (
      <div>
        {/* {this.props.children[0]} - child组件 - {this.props.children[1]} */}
        {this.props.children.a} - child组件 - {this.props.children.icon}
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <>
        <h2>插槽</h2>
        <Child>
          {/* <span>111</span>
          <span>222</span> */}

          {{
            a: <span>111</span>,
            icon: <span>222</span>,
          }}
        </Child>
      </>
    );
  }
}

export default App;
